<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            width: 100%;
            height: 100vh;
        }

        .ball {
            position: absolute;
            width: 60px;
            height: 60px;
            background-color: red;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div class="ball" draggable="true"></div>
    <script src="./jquery.js"></script>
    <script>
        // 使用jquery写全屏可拖动的小球(单个小球, 无需边缘检测)
        // 要求按下ctrl+z可以撤回到上一次小球的位置
        // 并在不能继续撤回时弹出警告框('已经撤回到底了')
        // (tiger)实现ctrl+y反撤回功能(反悔上一次撤回的操作)


        function bigDie() {
            //放置的位置
            const location = [];
            // 撤销的位置
            const antiRevocation = [];

            return {
                // 拖放事件
                getLocation(e) {
                    // 记录放置的位置
                    location.push({
                        y: e.clientY,
                        x: e.clientX,

                    })
                    // 设置放置位置
                    $('.ball').offset({ top: e.clientY, left: e.clientX });

                },
                //撤销事件
                retract(e) {
                    e.preventDefault();
                    if (e.key === 'z' && e.ctrlKey) {
                        // 放置位置的数组为1时已经到了第一次移动的位置
                        if (location.length === 1) {
                            //就可以回归原位
                            $('.ball').offset({ top: 0, left: 0 });
                            location.pop();
                        } else if (location.length === 0) {
                            alert('已经到底了');
                        } else {
                            // 执行撤销前把当前位置给反撤销记录起来
                            antiRevocation.push(location.slice(-1)[0]);
                            location.pop();
                            const axis = location.slice(-1)[0];
                            $('.ball').offset({ top: axis.y, left: axis.x });
                        }

                    }
                },
                //反撤销
                anti(e) {
                    e.preventDefault();
                    if (e.key === 'y' && e.ctrlKey) {
                        console.log(antiRevocation)
                        if (antiRevocation.length === 0) {
                            alert('已经到底了');
                        } else {
                            const axis = antiRevocation.slice(-1)[0];
                            console.log(axis);
                            $('.ball').offset({ top: axis.y, left: axis.x });
                            antiRevocation.pop();
                        }

                    }
                }
            };
        }

        const event = bigDie();
        $(document.body).on('dragover', function (e) {
            e.preventDefault();
        });

        $(document.body).on('drop', event.getLocation);

        $(document).on('keydown', event.retract)

        $(document).on('keydown', event.anti)








    </script>
</body>

</html>
